<template>
  <div class="hello">
    <el-row type="flex" justify="space-between">
      <el-form ref="formName" :inline="true" :model="formInline">
        <el-form-item label="标签名称" prop="user">
          <el-input v-model="formInline.user"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="region">
          <el-select v-model="formInline.region" placeholder="状态">
            <el-option label="启用" value="1"></el-option>
            <el-option label="禁用" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="clear">清除</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">搜索</el-button>
        </el-form-item>
      </el-form>
      <el-col :span="4"><el-row type="flex" justify="end">
          <el-button type="success" @click="dialogFormVisible =true" icon="el-icon-edit">新增标签</el-button>
        </el-row></el-col>
    </el-row>
    <el-alert title="" type="info" show-icon><span style="font-size:small">共{{ total }}条数据</span></el-alert>

    <el-table :data="tables" :stripe="true" :border="flase" width="100%"
      :header-cell-style="{ color: 'gray', fontSize: '15px' }">
      <el-table-column type="index" width="100" font-size="60px" label="序号">
      </el-table-column>
      <el-table-column label="所属学科" prop="subjectName" text-align="center" width="120"></el-table-column>
      <el-table-column label="标签名称" prop="tagName" width="100"></el-table-column>
      <el-table-column label="创建人" prop="username" width="95"></el-table-column>
      <el-table-column label="创建时间" prop="addDate"></el-table-column>
      <el-table-column label="状态" prop="state" width="60">
        <template slot-scope="scope">
          <span v-if="scope.row.state == 0">禁用</span>
          <span v-else>启用</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small"  @click="modifyData()">
            {{ scope.row.state == 1 ? '禁用' : '启用' }}
          </el-button>
          <el-button  @click="dialogFormVisible = true" type="text" size="small">修改</el-button>
          <el-button   @click="dialogVisible = true" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[2, 7, 10, 20, 30]" :page-size="pageSize" layout=" sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <el-dialog customClass="customWidth"  title="新增目录" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="所属学科" :label-width="formLabelWidth">
          <el-input v-model="form.subjectName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="目录名称" :label-width="formLabelWidth">
          <el-input v-model="form.tagName" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="finish">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <span>确定要删除吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="deleteInfo">确 定</el-button>

      </span>
    </el-dialog>
  </div>
</template>

<script>
import { list } from '../../api/hmmm/tags'

export default {
  name: 'Tags',
  data () {
    return {
      tables: [

      ],
      dialogVisible: false,
      dialogFormVisible: false,
      formInline: {
        user: '',
        region: ''
      },

      editForm: [], // 修改
      addForm: [], // 新增
      searchData: '',
      shopGoods: [],
      input: '',
      id: '',
      total: 0, // 数据库中商品总条数
      pageSize: 10,
      currentPage: 1,

      form: {
        subjectName: '',
        tagName: ''
      },
      formLabelWidth: '120px'

    }
  },
  mounted () {
    this.searchByPage(this.currentPage, this.pageSize)
  },
  methods: {
    deleteInfo () {
      this.dialogVisible = false
      this.$message('删除成功')
    },
    finish () {
      this.$message('修改或者新增成功')
      this.dialogFormVisible = false
    },
    modifyData () {
      this.$message('启用或禁用完成')
    },

    clear () {
      this.$refs.formName.resetFields()
    },
    onSubmit () {
      console.log('submit!')
    },
    handleSizeChange: function (size) {
      this.pageSize = size
      console.log(this.pageSize) // 每页下拉显示数据
      this.searchByPage(this.currentPage, this.pageSize)
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage
      console.log(this.currentPage) // 点击第几页
      this.searchByPage(this.currentPage, this.pageSize)
    },
    async searchByPage (currentPage, pageSize) {
      await list({
        page: currentPage,
        pagesize: pageSize
      }).then((response) => {
        console.log(response)
        this.total = response.data.counts// 数据库中商品总条数
        this.tables = response.data.items
      }).catch((error) => {
        console.log('查询失败的原因：', error)
      })
    },
    closeDialog () {
      this.centerDialogVisible = false
      this.isAddMembers = false
      console.log('editfrom', this.editForm)
      console.log('addfrom', this.addForm)
    },
    getGoods () {

    }
  },
  computed: {

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.table-grid-content {
  border-radius: 4px;
  height: 50 px;
  background: #ebeef5;
  padding: 10px;
}

.el-table {
  color: #837f83;
  font-size: 15px;
  margin-top: 20px;
}
.block {
  display: flex;
  justify-content: right;
}

.customwidth {
width: 15% !important;
min-width: 100px !important;
}

</style>
